/*
* 倒计时需要改两处1,2
*/

var endTime = new Date();
endTime.setTime(endTime.getTime());//1.倒计时改这里
var curShowTimeSeconds = 0;

var balls = [];
const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000","#FFEE00"];


window.onload = function(){

    WINDOW_WIDTH = document.documentElement.clientWidth-10;
    WINDOW_HEIGHT = document.documentElement.clientHeight-20;

    MARGIN_LEFT = Math.round(WINDOW_WIDTH/10);
    RADIUS = Math.round(WINDOW_WIDTH*4/5/108)-1;

    MARGIN_TOP = Math.round(WINDOW_HEIGHT/5);

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext("2d");

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    curShowTimeSeconds = getCurrentShowTimeSeconds();
    setInterval(
        function(){
            render(context);
            update();
        }
        ,
        50
    );
}

function getCurrentShowTimeSeconds(){
    var curTime = new Date();
    /*var ret = curTime.getTime() - endTime.getTime();//2.倒计时改这里
    ret = Math.round(ret/1000);
    return ret>=0?ret:0;*/
    var ret = curTime.getHours()*3600 + curTime.getMinutes()*60 + curTime.getSeconds();
    return ret;
}

function update(){
    //负责时间改变
    var nextShowTimeSeconds = getCurrentShowTimeSeconds();
    var nextHours = parseInt(nextShowTimeSeconds/3600);
    var nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60);
    var nextSeconds = nextShowTimeSeconds%60;

    var curHours = parseInt(curShowTimeSeconds/3600);
    var curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60);
    var curSeconds = curShowTimeSeconds%60;

    if(nextSeconds!=curSeconds) {
        //时间发生改变
        if(parseInt(curHours/10)!= parseInt(nextHours/10)){
            addBalls( MARGIN_LEFT+0, MARGIN_TOP, parseInt(curHours/10));
        }
        if(parseInt(curHours%10)!= parseInt(nextHours%10)){
            addBalls( MARGIN_LEFT+15*(RADIUS + 1), MARGIN_TOP, parseInt(curHours/10));
        }


        if(parseInt(curMinutes/10)!= parseInt(nextMinutes/10)){
            addBalls( MARGIN_LEFT+39*(RADIUS + 1), MARGIN_TOP, parseInt(curMinutes/10));
        }
        if(parseInt(curMinutes%10)!= parseInt(nextMinutes%10)){
            addBalls( MARGIN_LEFT+54*(RADIUS + 1), MARGIN_TOP, parseInt(curMinutes/10));
        }


        if(parseInt(curSeconds/10)!= parseInt(nextSeconds/10)){
            addBalls( MARGIN_LEFT+78*(RADIUS + 1), MARGIN_TOP, parseInt(curSeconds/10));
        }
        if(parseInt(curSeconds%10)!= parseInt(nextSeconds%10)){
            addBalls( MARGIN_LEFT+93*(RADIUS + 1), MARGIN_TOP, parseInt(curSeconds/10));
        }
        curShowTimeSeconds = nextShowTimeSeconds;
    }
    updateBalls();
}

function updateBalls() {
    for(var i=0; i<balls.length; i++){
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;

        if(balls[i].y >= WINDOW_HEIGHT - RADIUS){
            balls[i].y = WINDOW_HEIGHT-RADIUS;
            balls[i].vy = - balls[i].vy*0.7;
        }
        if(balls[i].x>=WINDOW_WIDTH - RADIUS){
            balls[i].x = WINDOW_WIDTH-RADIUS;
            balls[i].vx = - balls[i].vx*0.8;
        }
    }

    console.log(balls.length);

    var cnt = 0;
    for(let i = 0; i<balls.length; i++){
        if(balls[i].x + RADIUS>0 && balls[i].x - RADIUS < WINDOW_WIDTH){
            //balls.splice(j,1);
            balls[cnt++] = balls[i];
        }
    }
    while(balls.length>Math.min(600, cnt)) { //while(balls.length > cnt)
        balls.pop();
    }
}

function addBalls(x, y, num) {
    for(var i=0; i<digit[num].length; i++)
        for(var j=0; j<digit[num][i].length; j++)
            if(digit[num][i][j]==1){
                var aBall = {
                    x: x+j*2*(RADIUS+1)+(RADIUS+1),
                    y: y+i*2*(RADIUS+1)+(RADIUS+1),
                    g: 1.5+Math.random(),
                    vx: Math.pow(-1, Math.ceil(Math.random()*1000))*4,
                    vy: -5,
                    color: colors[Math.floor(Math.random()*colors.length)]
                }
                balls.push(aBall);
            }
}

function render(cxt){

    cxt.clearRect(0,0,WINDOW_WIDTH, WINDOW_HEIGHT);

    var hours = parseInt(curShowTimeSeconds/3600);
    var minutes = parseInt((curShowTimeSeconds-hours*3600)/60);
    var seconds = curShowTimeSeconds%60;
    //hours
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt);
    renderDigit(MARGIN_LEFT + (RADIUS+1)*15, MARGIN_TOP, parseInt(hours%10), cxt);
    renderDigit(MARGIN_LEFT + (RADIUS+1)*30, MARGIN_TOP, 10, cxt);
    //minutes
    renderDigit(MARGIN_LEFT + (RADIUS+1)*39, MARGIN_TOP, parseInt(minutes/10), cxt);
    renderDigit(MARGIN_LEFT + (RADIUS+1)*54, MARGIN_TOP, parseInt(minutes%10), cxt);
    renderDigit(MARGIN_LEFT + (RADIUS+1)*69, MARGIN_TOP, 10, cxt);
    //seconds
    renderDigit(MARGIN_LEFT + (RADIUS+1)*78, MARGIN_TOP, parseInt(seconds/10), cxt);
    renderDigit(MARGIN_LEFT + (RADIUS+1)*93, MARGIN_TOP, parseInt(seconds%10), cxt);

    for(var i=0; i<balls.length; i++) {
        cxt.fillStyle = balls[i].color;

        cxt.beginPath();
        cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2*Math.PI, true);
        cxt.closePath();

        cxt.fill();
    }
}

function renderDigit(x, y, num, cxt){

    cxt.fillStyle = "rgb(0, 102, 153)";

    for(var i = 0; i < digit[num].length; i++)
        for(var j = 0; j < digit[num][i].length; j++)
            if(digit[num][i][j] == 1){
                cxt.beginPath();
                cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1), y+i*2*(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);
                cxt.closePath();

                cxt.fill()
            }
}